<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商城</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"></meta>
<%-- <!--标准mui.css-->
<link rel="stylesheet" href="<%=basePath%>plugins/mui/css/mui.min.css"></link>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>plugins/mui/css/app.css"></link> --%>
<link rel="stylesheet"
	href="<%=basePath%>views/upai/layui/css/layui.css" media="all"></link>
<link href="<%=basePath%>views/upai/css/common.css" rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/style.css" rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/idangerous.swiper.css"
	rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/team.css" rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/style1.css" rel="stylesheet"></link>
<link href="<%=basePath%>plugins/video-js/video-js.css" rel="stylesheet"
	type="text/css"></link>

<script src="<%=basePath%>views/upai/js/jquery-1.9.1.min.js"></script>
<script src="<%=basePath%>plugins/video-js/video.js"></script>

<script>
	videojs.options.flash.swf = "video-js.swf";
</script>
<style>
.team .info_nav ul li {
	color: #a3a3a3;
	font-size: 0.32rem
}

.mkt_pricespan {
	display: inline-block;
}
</style>
</head>

<body>
	<div class="team">
		<input type="hidden" id="invite_code"
			value="${sessionScope.mobile_webuser.invite_code}" /> <input
			type="hidden" id="goodid" value="${goodDetail.id}" />
		<!----轮播图---->
		<div class="img_gallery">
			<div class="point">
				<c:forEach items="${fn:split(goodDetail.carouselPic,',')}" var="pic"
					varStatus="varStatus">
					<a href="#">${varStatus.index+1}</a>
				</c:forEach>
			</div>

			<div class="main_img main_img_1">
				<ul class="clearfix">
					<c:forEach items="${fn:split(goodDetail.carouselPic,',')}"
						var="pic" varStatus="varStatus">
						<li><span
							class="img_${varStatus.index+1} img_${varStatus.index+1}${varStatus.index+1}"><img
								src="<%=imagePath%>${pic}" /></span></li>
					</c:forEach>
				</ul>
				<a href="javascript:;" id="btn_prev"></a> <a href="javascript:;"
					id="btn_next"></a>
			</div>
			<div class="img_font">
				<c:forEach items="${fn:split(goodDetail.carouselPic,',')}" var="pic"
					varStatus="varStatus">
					<span>img ${varStatus.index+1}</span>
				</c:forEach>
			</div>
		</div>
		<!----轮播图end---->

		<div class="shoucang">
			<p class="name-size">${goodDetail.name}</p>
			<p class="gengneng" style="height: 15px;"></p>
			<div class="right_sc">
				<span id="collectspan"
					class="right_sc_span<c:if test="${collected==1}"> right_sc_span-11</c:if>"
					onclick="collectGoods(${goodDetail.id})"></span>
				<p>收藏</p>
			</div>

			<div class="preferential_jg">
				<p class="xianjia">
					¥${goodDetail.product.price}<span>分享总奖励${goodDetail.product.level1rebate+goodDetail.product.level2rebate}％</span>
				</p>
				<p class="yuanjia">
					市场价<span>¥${goodDetail.product.mkt_price}</span>
				</p>
				<div class="xianshiqg">
					<p style="font-size: 0.24rem">
						<img src="<%=basePath%>views/upai/images/xiangqing_09.png" />陛下抓紧购买哦
					</p>
				</div>
			</div>

			<div class="sales_volume clearfix">
				<div class="neibupad fl"
					style="border-right: 1px solid #ccc; padding-right: 0.3rem">
					<span>月销量 <b style="color: #e4000a;">${empty soldCount?0:soldCount}</b></span>
				</div>
				<div class="neibupad fl" style="padding-left: 0.6rem">
					<span>累计评价 <b style="color: #e4000a;">${fn:length(dianpingList)}</b></span>
				</div>
			</div>
		</div>

		<div class="clearfix brand-introduction margix_top">
			<div class="left_logo">
				<img src="<%=basePath%>views/upai/images/two_03.png" />
			</div>
			<div class="right_jieshao">U牌，50年专注精油及芳疗领域，在全世界超过19个国家，拥有35个生产基地，实现全球优质产区直采，确保品质卓越的植物原产地。</div>
		</div>

		<div class="margix_top">
			<a href="<%=basePath%>mobile/showarticle?articleid=16"> <img
				style="max-width: 100%"
				src="<%=basePath%>views/upai/images/pz_02.png" />
			</a>
		</div>

		<c:if test="${goodDetail.videourl!=''}">
			<iframe height='300' width='100%' src='${goodDetail.videourl}'
				frameborder=0' allowfullscreen'></iframe>
		</c:if>

		<div class="margix_top" style="padding: 0.3rem; background: #fff">
			<div class="sales_volume click_sales_volume clearfix">
				<div class="neibupad neibupad_sp fl"
					style="border-right: 1px solid #ccc; padding-right: 0.3rem">
					<span class="neibupad-1">商品详情</span>
				</div>
				<div class="neibupad neibupad_lji fl" style="padding-left: 0.6rem">
					<span>累计评价 <b style="color: #e4000a;">${fn:length(dianpingList)}</b></span>
				</div>
			</div>

			<div class="centent-qh">
				<ul>
					<c:forEach items="${fn:split(goodDetail.detailPic,',')}" var="pic"
						varStatus="varStatus">
						<li><img src="<%=imagePath%>${pic}" /></li>
					</c:forEach>
				</ul>
			</div>

			<div class="centent-qh" style="display: none">
				<ul class="tabulation_content">
					<c:choose>
						<c:when test="${fn:length(dianpingList)==0}">
							<li>
								<p>暂无评价</p>
							</li>
						</c:when>
						<c:otherwise>
							<c:forEach items="${dianpingList}" var="dianping">
								<li>
									<div class="clearfix xinmin_shijian">
										<span class="fl xinmin_shijian_left">${dianping.username}</span>
										<span class="fr xinmin_shijian_right">${dianping.c_appdate}</span>
									</div>
									<p>${dianping.c_text}</p>
								</li>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
		</div>

		<!-------滑动产品------->

		<div class="popular_tuijian">
			<h2 class="header-tj">
				<span>热卖推荐</span>
			</h2>


			<div class="main_img" style="height: 4.8rem">
				<ul style="height: 4.8rem">
					<c:if
						test="${!empty recommendgoods and fn:length(recommendgoods)!=0}">
						<c:forEach items="${recommendgoods}" var="good"
							varStatus="varStatus">
							<c:choose>
								<c:when test="${varStatus.index%2==0}">
									<li style="height: 4.8rem"><span style="height: 4.8rem">
											<!----------内部轮播图--------->
											<div class="tabulation">
												<ul class="clearfix" style="height: 4.8rem">
													<a style="float: left;"
														href="<%=basePath %>mobile/goodsdetail?id=${good.id}"><li
														class="padding_right"><img
															src="<%=imagePath%>${good.image}" />
															<div class="dingwei">
																<div class="shangpinxxi">
																	<p class="name">${good.name}</p>
																	<p class="price">
																		¥${good.product.price}<span>¥${good.product.mkt_price}</span>
																	</p>
																</div>
																<img class="gouwuche"
																	src="<%=basePath%>views/upai/images/two_11.png" />
															</div></li></a>
								</c:when>
								<c:otherwise>
									<a style="float: left;"
										href="<%=basePath %>mobile/goodsdetail?id=${good.id}"><li
										class="padding_left"><img
											src="<%=imagePath%>${good.image}" />
											<div class="dingwei">
												<div class="shangpinxxi">
													<p class="name">${good.name}</p>
													<p class="price">
														¥${good.product.price}<span class="mkt_pricespan">¥${good.product.mkt_price}</span>
													</p>
												</div>
												<img class="gouwuche"
													src="<%=basePath%>views/upai/images/two_11.png" />
											</div></li></a>
				</ul>
			</div>
			</span>
			</li>
			</c:otherwise>
			</c:choose>
			</c:forEach>
			</c:if>
			</ul>
		</div>
	</div>
	</div>


	<!----------悬浮底部------------>
	<div style="height: 1.48rem"></div>
	<div class="footer_gouwc ">
		<ul class="clearfix footer_gouwc_ul">
			<li class="width_25"><a
				style="width: 100%; display: block; border-right: 1px solid #ccc;"
				href="javascript:void(0);" onclick="goHome()"> <img
					src="<%=basePath%>views/upai/images/footer_21.png" />
			</a></li>

			<li class="width_25" style="position: relative"><div
					id="carcount">
					<c:if
						test="${!empty sessionScope.cargoodcount and sessionScope.cargoodcount != 0}">
						<a href="" class="gygwc_span">${sessionScope.cargoodcount}</a>
					</c:if>
				</div> <a href="javascript:void(0);" onclick="goCar()"> <img
					src="<%=basePath%>views/upai/images/gwcs_06.png" />
			</a></li>
			<li class="width_50 tianjiagwc"><a href="javascript:void(0);"
				onclick="addCar(${goodDetail.id},${goodDetail.product.product_id})">加入购物车</a></li>
		</ul>
	</div>
	<!-----点击滑动到顶部---->
	<div id="returnTop" class="returnTop"></div>
	<!-----点击滑动到顶部end---->
	<script src="<%=basePath%>views/upai/js/jquery-1.9.1.min.js"></script>
	<script src="<%=basePath%>views/upai/js/idangerous.swiper.min.js"></script>
	<script src="<%=basePath%>views/upai/layui/layui.js" charset="utf-8"></script>
	<script src="<%=basePath%>views/upai/js/common.js" charset="utf-8"></script>
	<script src="<%=basePath%>views/upai/js/jquery.event.drag.js"></script>
	<script src="<%=basePath%>views/upai/js/jquery.touchSlider.js"></script>
	<script type="text/javascript" src="<%=basePath%>views/js/layer.m.js"></script>
	<script src="<%=basePath%>plugins/mui/js/mui.min.js"></script>
	<script type="text/javascript"
		src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<!-------点击滑动到顶部-------->
	<script>
		$(function() {
			$("#returnTop").click(function() {
				var speed = 500;//滑动的速度
				$('body,html').animate({
					scrollTop : 0
				}, speed);
				return false;
			});

			//商品详情切换
			$('.click_sales_volume div').click(
					function() {
						$(this).find('span').addClass('neibupad-1').parent()
								.siblings().children()
								.removeClass('neibupad-1');
						$('.centent-qh').hide().eq(
								$('.click_sales_volume div').index(this))
								.fadeIn();
					});
            
			
			
			
			var ww = $(document).width();
			var ww1 = ww / 2 + 'px';
			$('.padding_right').css('width', ww1);
			$('.padding_left').css('width', ww1);
			$('.tabulation').css('padding', 0)
			$('.gouwuche').css('top', '0.15rem');
			
			var kd=$('.point').width();
			  //alert(kd);
			  var kd1=-kd/2+'px';
			  $('.point').css({marginLeft:kd1});
		});
	</script>

	<!----------轮播图-------------->
	<script type="text/javascript">
		$(document).ready(
				function() {

					$(".img_gallery").hover(function() {
						$("#btn_prev,#btn_next").fadeIn()
					}, function() {
						$("#btn_prev,#btn_next").fadeOut()
					});

					$dragBln = false;

					$(".main_img").touchSlider(
							{
								flexible : true,
								speed : 200,
								btn_prev : $("#btn_prev"),
								btn_next : $("#btn_next"),
								paging : $(".point a"),
								counter : function(e) {
									$(".point a").removeClass("on").eq(
											e.current - 1).addClass("on");//图片顺序点切换
									$(".img_font span").hide()
											.eq(e.current - 1).show();//图片文字切换
								}
							});

					$(".main_img").bind("mousedown", function() {
						$dragBln = false;
					});

					$(".main_img").bind("dragstart", function() {
						$dragBln = true;
					});

					$(".main_img a").click(function() {
						if ($dragBln) {
							return false;
						}
					});

					timer = setInterval(function() {
						$("#btn_next").click();
					}, 5000);

					$(".img_gallery").hover(function() {
						clearInterval(timer);
					}, function() {
						timer = setInterval(function() {
							$("#btn_next").click();
						}, 5000);
					});

					$(".main_img").bind("touchstart", function() {
						clearInterval(timer);
					}).bind("touchend", function() {
						timer = setInterval(function() {
							$("#btn_next").click();
						}, 5000);
					});
					
					//  获取轮播图图片高度
					var imhg=$('.img_11 img').height();
					var imhg1=imhg+'px';
					$('.img_11').css({height:imhg1});
					$('.main_img_1,.main_img_1 ul,.main_img_1 ul li,.img_gallery').css({height:imhg1});

				});

		
		//收藏按钮
		function collectGoods(goodid){
			$.ajax({
				type:"post",
				url:"<%=basePath%>mobile/addCollectGood",
				data:"goodid="+goodid,
				success:function(msg){
					var info = eval('('+msg+')');
					mui.alert(info.information);
					if(info.error == "0000"){
						$('.right_sc span').toggleClass('right_sc_span-11');
					}
				}
			})
		}
		
		//加入购物车按钮
		function addCar(goodid,product_id){
			$.ajax({
				type:"post",
				url:"<%=basePath%>mobile/addCar",
				data:"goods_id="+goodid+"&product_id=" + product_id + "&count=1",
				success:function(msg){
					var info = eval('('+msg+')');
					if(info.error == "0000"){
						alert("添加成功");
						if(info.information == "0"){
							$("#carcount").html("");
						}else{
							$("#carcount").html("<a href='' class='gygwc_span'>"+info.information+"</a>");
						}
					}
				}
			})
		}
		
		//回到首页
		function goHome(){
			window.location.href="<%=basePath%>mobile/home";
		}
		
		//跳转到购物车页面
		function goCar(){
			window.location.href="<%=basePath%>mobile/cart";
		}
	</script>
	<script>
	var shareurl='http://www.upai.shop/B2C4Upai/mobile/wxAuth?redirect_uri=http://www.upai.shop/B2C4Upai/mobile/weiXinRedirect?url=goodsdetail/'+$("#invite_code").val()+"/"+$("#goodid").val();
	$(function() {
		$.ajax({
			url : "../mobile/param",
			data : {
				address : location.href.split('#')[0]
			},
			success : function(data) {
				var objs = eval('('+data+')');
				wx.config({
					debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : objs.appid, // 必填，公众号的唯一标识
					timestamp : objs.timestamp, // 必填，生成签名的时间戳
					nonceStr : objs.noncestr, // 必填，生成签名的随机串
					signature : objs.sign, // 必填，签名，见附录1
					jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ]
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
			}
		});
		wx.ready(function() {
			wx.onMenuShareTimeline({
				title : 'Upai商城', // 分享标题
				link:shareurl,
				imgUrl : '', // 分享图标
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareAppMessage({
				title : 'Upai商城', // 分享标题
				desc : '', // 分享描述
				link:shareurl,
				imgUrl : '', // 分享图标
				type : '', // 分享类型,music、video或link，不填默认为link
				dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});
		});
		
		wx.error(function(res){
		    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		});
	});
	</script>
</body>
</html>